import React, { Component } from 'react'
// connect 为一个高阶组件
// 是一个函数，以一个组件作为参数，并且返回一个新的组件
// 这个参数的组件  -----   UI组件     ------   负责页面的渲染
// 这个返回的组件  -----   容器组件    ------   提供UI组件所需要的数据以及执行的业务逻辑
// 容器组件 以及 UI组件通讯 通过 this.props 或者 props
import { connect } from 'react-redux'
class App extends Component {
  componentDidMount () {
    console.log(this.props)
    this.props.getProListData()
  }
  render() {
    const { proList } = this.props
    return (
      <div>
        {
          proList && proList.map((item, index) => {
            return (
              <p key = { index }> { item.proname } </p>
            )
          })
        }
      </div>
    )
  }
}
// 用来给UI组件提供状态的
const mapStateToProps = (state) => {
  // state 代表状态管理器中所有的状态
  return { // key值为自定义的值，一般情况下写的和 状态管理器中的状态要一致
    // 可以通过 this.props.proList 以及 this.props.BannerList可以访问数据
    proList: state.proList,
    bannerList: state.bannerList
  }
}

const mapDispatchToProps = (dispatch) => { // 默认参数 dispatch 可以触发actions从而改变状态
  return {
    getProListData () {
      // 请求数据
      fetch('http://121.89.205.189/api/pro/list')
        .then(res => res.json())
        .then(res => {
          console.log(res)
          // 通过dispatch触发reducer，从而改变状态
          dispatch({
            type: 'UPDATE_PRO_LIST',
            payload: res.data
          })
        })
    },
    getBannerListData () {}
  }

}

// 如何使用connect高阶组件
// connect()(App)  ----  容器组件  ----  函数柯里化
// connect() 返回的还是一个函数   ----  包括了 给UI组件的 状态以及业务逻辑
// connect(mapStateToProps, mapDispatchToProps)
// mapStateToProps  获取状态管理器中的数据给props属性
// mapDispatchToProps 提供业务逻辑给props属性
export default connect(mapStateToProps, mapDispatchToProps)(App)
/**
 * function fn (a) {
 *    return function(b) {
 *      return function (c) {
 *        return a + b + c
 *      }
 *    }
 * }
 * fn(1)(2)(3) // 6
 */